<template>
	<n-page>
		<view slot="navbar">

		</view>
		<view slot="header">
			
		</view>
		<view slot="body" style="height: 100%;" class="bg-gray-1 padding-md">
			
			<text class="text-xl text-bold">{{articleInfo.title}}</text>
			<view class="color-gray-7 margin-y-md">
				<text>{{articleInfo.class_name}}</text>
				<text class="margin-left-xs">阅读：999+</text>
				<text class="margin-left-xs">时间：{{ $util.timeStampTurnTime(articleInfo.create_time) }}</text>
			</view>
<!-- 			<view class="flex-row justify-center">
				<n-image class="" :src="articleInfo.article_img" placeholder="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dnvue/3a91f3b0-4b07-11eb-8a36-ebb87efcf8c0.png"></n-image>
			</view> -->
			<rich-text :nodes="articleInfo.content"></rich-text>
			<view class="flex-row justify-between padding-x-xl margin-x-xl">
				<view class="flex-column text-center">
					<n-icon name="appreciatefill" color="$gray-7" size="42"></n-icon>
					<text>99+</text>
				</view>
				<view class="flex-column text-center">
					<n-icon name="appreciatefill" color="$gray-7" size="42" style="transform: scaleY(-1);"></n-icon>
					<text>0</text>
				</view>
				<view class="flex-column text-center">
					<n-icon name="likefill" color="$gray-7" size="42"></n-icon>
					<text>收藏</text>
				</view>
			</view>

			<!-- 推荐文章 -->
			<view class="flex-column margin-top-md">
				<view class="flex-row">
					<view class="recommend-head-left"></view>
					<text>推荐文章</text>
				</view>
				<view class="flex-row"  v-for="(recommendItem ,recommendIndex) in recommendList" :key="recommendIndex" @click="toArticle(recommendItem.id)">
					<view class="flex-column">
						<text>{{recommendItem.title}} </text>
						<view class="text-color left-text">
							<text>{{recommendItem.class_name}}</text>
							<text class="left-text-time">{{ $util.timeStampTurnTime(recommendItem.create_time) }}</text>
						</view>
					</view>
					<view class="right-box">
						<n-image class="" :src="recommendItem.article_img" :placeholder="$util.getDefaultImage().default_shop_img" mode="aspectFill"></n-image>
					</view>
				</view>
			</view>
		</view>
	</n-page>
</template>

<script>
	import diyRichText from '@/components/diy-rich-text/diy-rich-text.vue';
	import htmlParser from '@/common/js/html-parser';
	
	export default {
		components: {
			diyRichText
		},
		data() {
			return {
				articleInfo: '',
				recommendList: [],
				id:0,
			}
		},
		onShow() {},
		onLoad(option) {
			
			this.id = option.id
			setTimeout(() => {
				// this.init()
			}, 300);
			this.init()
		},
		methods: {
			/**
			 * 初始化
			 */
			init() {
				this.classLists()
				
			},

			/**
			 * 文章详情
			 */
			classLists() {
				this.$api.sendRequest({
					url: '/api/article/info',
					data: {
						// id:this.id
						id: this.id
					},
					success: res => {
						if (res.code == 0) {
							// console.log(res);
							// this.articleInfo =  res.data.content.split()
							this.articleInfo = res.data
							this.articleInfo.content = htmlParser(this.articleInfo.content);
							// console.log(this.articleInfo);
							// console.log(this.articleInfo instanceof Array);
						}
						this.recommend()
					},
				});
			},

			/**
			 * 推荐文章
			 */
			recommend() {
				console.log(this.articleInfo);
				this.$api.sendRequest({
					url: '/api/article/recommend',
					data: {
						class_id:this.articleInfo.class_id,
						page: 1,
					},
					success: res => {
						if (res.code == 0) {
							console.log(res);
							// console.log(res.data);
							this.recommendList = res.data.list
						}
					},
				});
			},
			/**
			 * 详情
			 * @param {num} id
			 */

			toArticle(id) {
				uni.navigateTo({
					url: '/otherpages/member/learn/info/info?id=' + id,
				});
			}



		}


	}
</script>

<style lang="scss" scoped>
	
</style>
